<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            display: flex;
            background-color: #ddd;
        }
        .left-side,.right-side {
            width: 200px;
        }
        .left-side {
            background-color: red;
            height: 500px;
            /*
                section 的高度会自动被最高的一个子元素撑开，同时其它子元素的高度也会被拉到跟 section 元素一样高，（除非其他子元素显示设置了height 非 auto）
                而如果给 section 元素设置了高度，而所有子元素的高度设置为 auto ，所有的子元素也都会自动跟父元素一样高，
                这简直就是在传统布局中做梦都想要的功能！
            */
        }
        .right-side {
            background-color: blue;
            height: 300px;  /* 显示的设置了高度，就不会自动拉伸了 */
        }
        .content {
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <section>
        <div class="left-side">left-side</div>
        <div class="content">content</div>
        <div class="right-side">right-side</div>
    </section>
</body>
</html>
